/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed;">
      <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap='goBack'></a>
      <h1 class="mui-title">{{currentHeader.title}}</h1>
    </header>
    <div class="mui-content" style="padding-top: 70px;">
      <div style="text-align: center;padding: 18px;">
        <input type="text"  id="phone" v-model="registerData.phone" @input='changePhone' placeholder={{language.PE}}><br>
        <input type="text" v-model="registerData.authCode" @input='change' placeholder={{language.ETC}} class="Obtain">
        <button type="button" class="mui-btn mui-btn-enter" disabled id="Obtain" v-text="code" @tap="Obtain"></button>
        <input type="password" id="password" style="padding: 4px 15px;" @input='change' v-model="registerData.password" class="input"><br>
        <div id="placeholder" v-show="isShow" @click="clickDiv()" class="placeholder"></div>
        <input type="password" @input='change' v-model="registerData.passwords" placeholder={{language.PA}}>
      </div>
      <!--<div class="red" v-html="tip"></div>-->
      <button type="button" id='button' disabled class="mui-btn mui-btn-SingIn" @tap="registerFn()" v-text="button" ></button>
    </div>
  </div>
</template>
<script>
  import store from '../login-store';
  import {tools} from 'tools';
  import {FastClick} from 'fastclick';
  var lan = require('./../language.json');
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        currentHeader: {
          title: ''
        },
        code: lan[window.lan].ObtainCode,
        count: 60,
        isShow: true,
        button: 'Register',
        registerData: {},
        language: lan[window.lan],
        login: store.state,
        r: ''
      };
    },
    methods: {
      goBack: function () {
        history.go(-1);
      },
      clickDiv: function () {
        document.getElementById('password').focus();
      },
      Obtain: function () {
        let [self, $dom, type] = [this, document.getElementById('Obtain'), 'register'];
        if (this.$route.params.type == 'idEite') {
          type = 'setPassword';
        } else {
          type = 'register';
        }
        store.ifExisted(self.registerData.phone, self.r, function () {
        $dom.setAttribute('disabled', true);
          self.code = self.language.Resend + '(' + self.count + ')';
          var fid = setInterval(function () {
            self.count = self.count - 1;
            self.code = self.language.Resend + '(' + self.count + ')';
            if (self.count === 0) {
              self.code = self.language.ObtainCode;
              self.count = 60;
              $dom.removeAttribute('disabled');
              window.clearInterval(fid);
            }
          }, 1000);
          store.Obtain(self.registerData.phone, self.r, function () {
            window.clearInterval(fid);
            self.code = self.language.ObtainCode;
            self.count = 60;
            $dom.removeAttribute('disabled');
          });
        }, type);
      },
      changePhone: function () {
        if (this.registerData.phone && this.count == 60) {
          document.getElementById('Obtain').removeAttribute('disabled');
        } else {
          document.getElementById('Obtain').setAttribute('disabled', true);
        }
      },
      change: function () {
        if (this.registerData.password) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        if (this.registerData.phone && this.registerData.authCode && this.registerData.password && this.registerData.passwords) {
          document.getElementById('button').removeAttribute('disabled');
        } else {
          document.getElementById('button').setAttribute('disabled', true);
        }
      },
      registerFn: function () {
        var [self] = [this];
        var type = 'register';
        if (this.$route.params.type == 'idEite') {
            type = 'reset';
        };
        store.registerFn(this.registerData, this.r, function () {
          if (self.$route.params.type == 'idEite') {
            self.$router.go('/resetSuccues');
          } else {
            self.$router.go('/registerSuccues/register');
          }
        }, type);
      }
    },
    //  created 钩子在实例创建后,在reday之前调用
    created: function () {
      if (document.querySelector('head title')) {
        document.querySelector('head title').textContent = this.language.SIWTA;
      }
    },
    route: {
      data: function (data) {
        var self = this;
        this.isShow = true;
        this.registerData = {
          phone: '', // 18165785240
          authCode: '', // DAbao123
          password: '', // DAbao123,
          passwords: '' // DAbao123,
        };
         if (this.$route.params.type == 'idEite') {
           this.registerData.phone = store.state.editData.phone || store.state.editData.email;
           this.currentHeader.title = this.language.ResetPassword;
           this.button = this.language.Reset;
           this.r = tools.getQueryString('r') || store.state.detailR;
           store.getUserInfo(this.r, function (value) {
             self.registerData.phone = value.phone || value.email;
           });
         } else {
           this.registerData.phone = '';
           this.currentHeader.title = this.language.Register;
           this.button = this.language.Register;
           this.r = tools.getQueryString('r') || store.state.r;
         }
      }
    },
    ready: function () {
      document.getElementById('placeholder').innerHTML = this.language.PMSCA;
      if (this.$route.params.type == 'idEite') {
        document.getElementById('phone').setAttribute('disabled', true);
        document.getElementById('Obtain').removeAttribute('disabled');
      } else {
        document.getElementById('phone').removeAttribute('disabled');
      };
      mui('.mui-scroll-wrapper').scroll();
      FastClick.attach(document.body);
    }
  };
</script>
